<template>
  <!-- 外层背景 -->
  <div ref="kbContainerOuter" class="kb-container-outer">
    <!-- 内层缩放比 -->
    <div class="kb-container-inner" :style="innerStyle">
      <!-- 内层header -->
      <div class="kb-container-header">
        <slot name="header" />
      </div>
      <!-- 内层body -->
      <div class="kb-container-body">
        <slot name="body" />
      </div>
    </div>
  </div>
</template>
<script>
// 原稿尺寸及宽高比
const baseWidth = 1715;
const baseHeight = 885;
const baseRatio = baseWidth / baseHeight;
export default {
  name: "KbBase",
  components: {},
  props: {
    // 缩放模式
    // contain：保持原有尺寸比例。将图片缩放到完全适应，可能会有部分看不见。
    // cover：保持原有尺寸比例。将图片缩放到完全适应，可能会有部分会超出容器。
    scaleMode: {
      type: String,
      default: "cover",
    },
  },
  data() {
    return {
      outerWidth: 0,
      outerHeight: 0,
      resizeObserver: undefined,
      innerStyle: {
        width: `${baseWidth}px`,
        height: `${baseHeight}px`,
        transform: "scale(1)",
        transformOrigin: "left top",
        position: "static",
        left: "0",
        top: "0",
      },
    };
  },

  computed: {},
  watch: {
    scaleMode() {
      console.log(this.outerWidth, this.outerHeight);
      this.innerResize(this.outerWidth, this.outerHeight);
    },
  },

  created() {},
  mounted() {
    this.watchDomSize();
  },
  beforeDestroy() {
    this.resizeObserver.disconnect();
  },
  methods: {
    // 侦听外部容器尺寸变化
    watchDomSize() {
      const outerDom = this.$refs.kbContainerOuter;
      // 创建一个 ResizeObserver 实例
      this.resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          // 获取新的元素宽度和高度
          this.outerWidth = entry.contentRect.width;
          this.outerHeight = entry.contentRect.height;
          // 设置内层容器缩放比
          this.innerResize(this.outerWidth, this.outerHeight);
        }
      });
      // 开始观察 resizableElement 元素的尺寸变化
      this.resizeObserver.observe(outerDom);
    },
    // 内部容器缩放比
    innerResize(viewWidth, viewHeight) {
      if (this.scaleMode === "cover") {
        // cover模式
        const scaleWidth = viewWidth / baseWidth;
        const scaleHeight = viewHeight / baseHeight;
        // 判断那个比例接近原稿
        const ratio =
          Math.abs(scaleWidth - 1) > Math.abs(scaleHeight - 1)
            ? scaleHeight
            : scaleWidth;
        // 设置内部容器缩放;
        this.innerStyle.position = "static";
        this.innerStyle.transform = `scale(${ratio})`;
        this.innerStyle.transformOrigin = "left top";
      } else {
        // contain模式
        // 判断宽高根据基准比例哪个更短
        const ratio =
          viewWidth / baseRatio >= viewHeight
            ? viewHeight / baseHeight
            : viewWidth / baseWidth;
        // 设置内部容器缩放;
        this.innerStyle.position = "absolute";
        this.innerStyle.left = "50%";
        this.innerStyle.top = "50%";
        this.innerStyle.transform = `translate(-50%,-50%) scale(${ratio})`;
        this.innerStyle.transformOrigin = "center";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
$bgc: #f3f4f6;
.kb-container {
  &-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: $bgc;
  }
  &-body {
    display: flex;
    box-sizing: border-box;
    padding-top: 16px;
    background: $bgc;
  }
}
</style>